<template>
  <div id="openlayersContainer" ref="openlayersContainer"></div>


</template>

<script setup>
// import { View, Map, TileLayer, OSM, fromLonLat } from 'ol';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile.js'
import Map from 'ol/Map.js'
import XYZ from 'ol/source/XYZ.js'
import 'ol/ol.css'
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';

import { onMounted, ref } from 'vue'
var tdtUrl = 'https://t1.tianditu.gov.cn/';
var subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
var token = 'ee20013ff03e7d98b23e1251bc0b7cea';
onMounted(async () => {
  // 天地图信息
  const map = new Map({
    target: 'openlayersContainer',
    view,
    layers: [
      tdtLayer, tdtnameLayer ,staticLayer
    ],
  });
  console.log(Map)
})
const center = [114.3165, 30.5264];
const view = new View({
  center: [114.3165, 30.5264],
  zoom: 11,
  maxZoom: 18,
  minZoom: 5,
  projection: 'EPSG:4326'
})

// layer和sourse：  
// 瓦片图层 tileLayer加载底图-瓦片涂层对应的就是瓦片数据源    
// 静态图片图层 ImageLayer 加载静态图片--对应的是静态图片数据源    
// 矢量图层VectorLayer 通常加载矢量数据 添加地图标注  对应的是矢量数据源
// http://t0.tianditu.gov.cn/img_c/wmts?tk=
const tdtSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + token,
  //引入高德地图
  // url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
})
const tdtnameSourse = new XYZ({
  // 天地图
  url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + token,
})
// http://t0.tianditu.gov.cn/cva_c/wmts?tk=
const tdtnameLayer = new TileLayer({
  source: tdtnameSourse
})

const tdtLayer = new TileLayer({
  source: tdtSourse
})
const cxtent =  [center[0]-0.1,center[1]-0.1,center[0]+0.1,center[1]+0.1]
const staticLayer = new ImageLayer({
  source: new Static({
    url: require('./assets/logo.png'),
    imageExtent: cxtent
  })
})



</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#openlayersContainer {
  width: 100vw;
  height: 100vh;

}

.button-container {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}
</style>
